<script setup>
import Hero from "./sections/Hero.vue";
import PopularProducts from "./sections/PopularProducts.vue";
import SuperQuality from "./sections/SuperQuality.vue";
import Services from "./sections/Services.vue";
import SpecialOffer from "./sections/SpecialOffer.vue";
import CustomerReviews from "./sections/CustomerReviews.vue";
import Subscribe from "./sections/Subscribe.vue";
import Footer from "./sections/Footer.vue";
import Nav from "./components/Nav.vue";
</script>

<template>
  <main class="relative">
    <Nav />
    <section class="xl:padding-l wide:padding-r padding-b">
      <Hero />
    </section>
    <section class="padding">
      <PopularProducts />
    </section>
    <section class="padding">
      <SuperQuality />
    </section>
    <section class="padding-x py-10">
      <Services />
    </section>
    <section class="padding">
      <SpecialOffer />
    </section>
    <section class="padding bg-pale-blue">
      <CustomerReviews />
    </section>
    <section class="padding-x w-full py-16 sm:py-32">
      <Subscribe />
    </section>
    <section class="padding padding-x padding-t bg-black pb-8">
      <Footer />
    </section>
  </main>
</template>

<style scoped></style>
